<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>深层侦听</title>
</head>
<body>
<div id="app">
    <h1>姓名：{{ person.name }}</h1>
    <h1>年龄：{{ person.age }}</h1>
    <h1>性别：{{ person.gender }}</h1>

    <div></div>

    <button v-on:click="person.age++">+1</button>
</div>

<script type="module">
    import {createApp, reactive, watch} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let person = reactive(
                    {
                        name: "abcque",
                        age: 18,
                        gender: "M"
                    }
                )

                // 第一个参数如果指定使用变量名称， deep 将不起作用
                /*watch(
                    person,
                    (value) => {
                        console.log(value);
                    },
                    {
                        deep: true
                    }
                )*/
                // 第一个参数为 箭头函数形式，deep 起作用
                watch(
                    () => person,
                    (value) => {
                        console.log(value);
                    },
                    {
                        deep: false
                    }
                )
                return {
                    person
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>